<template>
	<view>
		<u-navbar :placeholder="true" bgColor="transparent" placeholder title="分类">
			<template #left>
				<!-- <u-search :animation="true" placeholder="搜索你喜欢的商品" height="74rpx" disabled></u-search> -->
			</template>
		</u-navbar>
		<view class="content">
			<view class="leftList">
				<scroll-view :style="{ height: leftScollViewHeight + 'px' }" :scroll-y="true" id="refMsgList"
					:scroll-into-view="'scoll' + (currentLeft - 1 || 0)" scroll-with-animation>
					<view :class="{ 'leftList-item': true, active: currentLeft == index }" :id="'scoll' + index"
						v-for="(item, index) in categoryList" :key="index" @click="handleTag(item, index)">
						<view class="item-name u-line-1">
							<text>{{ item.categoryName }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="rightList flex-1">
				<view class="flex justify-around items-center py-10">
					<view class="flex items-center gap-4" v-for="(item, index) in tabList"
						@click="handelTabs(item, index)">
						<text :class="{ 'color-primary': current === index }">{{ item.title }}
						</text>
						<view v-if="item.sort">
							<u-icon name="arrow-up-fill" size="14rpx"
								:color="item.sort === 'asc' ? '#6cc598' : '#d8d8d8'"></u-icon>
							<u-icon name="arrow-down-fill" size="14rpx"
								:color="item.sort === 'desc' ? '#6cc598' : '#d8d8d8'"></u-icon>
						</view>
					</view>
				</view>
				<!--        <scroll-view-->
				<!--          @scrolltolower="loadMore"-->
				<!--          :style="{ height: leftScollViewHeight - 28 + 'px' }"-->
				<!--          scroll-y-->
				<!--        >-->
				<z-paging ref="paging" v-model="goodsList" @query="queryList" scrollable
					:height="leftScollViewHeight - 28 + 'px'" :fixed="false"
					:auto-hide-loading-after-first-loaded="false" :use-page-scroll="false">
					<template #loading>
						<view class="w-full h-full flex items-center justify-center">
							<u-loading-icon mode="circle" color="#86bf9e"></u-loading-icon>
						</view>
					</template>
					<view>
						<GoodsRowItem borderBottom v-for="(item, index) in goodsList" :data="item"></GoodsRowItem>
					</view>
				</z-paging>
				<!--        </scroll-view>-->
			</view>
		</view>
		<view class="w-0 h-0">
			<u-loading-page style="position: fixed; z-index: 99999" :loading="loading"></u-loading-page>
		</view>
	</view>
</template>

<script>
	import GoodsRowItem from "@/components/goods-row-item/index.vue";
	import {
		fetchGoodsCategoryList,
		fetchGoodsPageList
	} from "@/services/api";

	export default {
		components: {
			GoodsRowItem,
		},
		data() {
			return {
				loading: false,
				keyword: "",
				currentLeft: 0,
				leftScollViewHeight: 0,
				categoryList: [],
				tabList: [{
						title: "销量",
						sort: "desc"
					},
					{
						title: "价格",
						sort: true
					},
					{
						title: "惊艳度"
					},
					{
						title: "新品"
					},
				],
				current: 0,
				tabsList: [],
				goodsList: [{}, {}, {}, {}],
				tagPagination: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				// 是否到底
				isWhether: false,
				// 右边顶部选择的标签对象
				tabsListItem: {},
				// 左边
				leftItem: {},
				goodsCategoryNo: "",
			};
		},
		created() {
			this.getCategoryList();
		},
		methods: {
			//点击标签
			handelTabs(item, index) {
				//处理标签点击显示状态
				if (item.sort) {
					this.tabList[index].sort = item.sort === "desc" ? "asc" : "desc";
				}

				this.tabList.forEach((itm, idx) => {
					if (idx !== index && itm.sort) {
						itm.sort = true;
					}
				});

				//处理点击后的逻辑
				this.afterHandelTab(this.tabList[index]);
				this.current = index;
				this.$refs.paging.reload();
			},
			//处理点击右侧顶部标签
			afterHandelTab(item) {
				console.log("item:", item);
			},
			handleTag(item, index) {
				this.goodsCategoryNo = item.serialNo;
				this.currentLeft = index;
				this.current = 0;
				this.$refs.paging.reload();
			},
			loadMore() {},
			getHeight(expandHeight = {
				tabbar: 0,
				navbar: 0
			}) {
				const systemInfo = uni.getSystemInfoSync();
				// 底部栏
				const tabbarHeight =
					systemInfo.screenHeight -
					systemInfo.safeArea.bottom +
					expandHeight.tabbar;
				// 导航栏
				const navbarHeight = systemInfo.statusBarHeight + expandHeight.navbar;
				return systemInfo.screenHeight - tabbarHeight - navbarHeight;
			},
			async getCategoryList() {
				const {
					data,
					error
				} = await fetchGoodsCategoryList();
				if (!error) {
					this.categoryList = data.length ? data : [{
						categoryName: "全部"
					}];
					this.goodsCategoryNo = data[0]?.serialNo;
				}
			},
			async queryList(pageNum, pageSize) {
				const {
					data,
					error
				} = await fetchGoodsPageList({
					goodsCategoryNo: this.goodsCategoryNo,
					pagination: {
						pageNum,
						pageSize,
					},
				});
				this.$refs.paging?.complete(data);
			},
		},
		mounted() {
			this.leftScollViewHeight = this.getHeight({
				tabbar: 50,
				navbar: 46,
			});
		},
	};
</script>

<style lang="scss" scoped>
	.search {
		padding: 30rpx 28rpx;
		height: 130rpx;
	}

	.ranking {
		background: linear-gradient(to right, #f0faff, #fafbfb);
	}

	.u-border-bottom {
		border-bottom-width: 0.5px !important;
		border-color: $u-border-color !important;
		border-bottom-style: solid;
	}

	.tag-error {
		color: $u-error;
		border-radius: 8rpx;
		border: solid 1px $u-error;
		font-size: 20rpx;
		padding: 2rpx 8rpx;
	}

	.content {
		display: flex;

		.leftList {
			width: 200rpx;
			background: #f9f9f9;

			.leftList-item {
				color: #333333;
				padding: 12rpx 30rpx;
				line-height: 80rpx;
				width: 200rpx;

				.item-name {
					display: flex;
					align-items: center;
				}
			}

			.active {
				background: rgba(102, 102, 102, 0.1);
				border-radius: 8px;
				position: relative;

				&:before {
					content: "";
					position: absolute;
					left: 2px;
					top: 50rpx;
					transform: translateY(-50%);
					width: 4px;
					height: 40rpx;
					background: #6ece93;
					border-radius: 4px;
				}
			}
		}
	}

	.rightList {
		padding-left: 24rpx;
	}
</style>